<template>
    <div style="margin: 20px 100px;">
        <button @click="addModel">添加饮水机</button>
        <button @click="changeModel">改变颜色</button>
    </div>
    <div id="webgl3"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'

/** 1.创建场景对象Scene*/
var scene = new THREE.Scene();

var loader = new FBXLoader();
    loader.load('/static/model/空间建模.fbx',function (obj) {
        obj.scale.set(0.4,0.4,0.4,0.4);//网格模型缩放
        obj.children[0].material.color.set(0xeeeeee); // 设置其中一个网格模型的颜色
        scene.add(obj);
    })


    /** 3.光源设置 */
    // 平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源的方向：通过光源position属性和目标指向对象的position属性计算
    directionalLight.position.set(0, 100, 100);
    // 方向光指向对象网格模型mesh，可以不设置，默认的位置是0,0,0
    // directionalLight.target = mesh;
    scene.add(directionalLight);
    // DirectionalLightHelper：可视化平行光
    // const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000);
    // scene.add(dirLightHelper);


    /** 4.相机设置 */
    var width = 1200; //窗口宽度
    var height = 800;
    var k = width/height;
    var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(-200, 200, 0);// 设置相机位置
    camera.lookAt(scene.position); //设置相机方向（指向的场景对象）

    /**4.创建的渲染对象 */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

onMounted(()=>{
    document.getElementById('webgl3').appendChild(renderer.domElement);
    renderer.render(scene, camera);

    // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
    var axisHelper = new THREE.AxesHelper(450);
    scene.add(axisHelper);

    /**鼠标操作 */
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        requestAnimationFrame(render);
    }
    render();
    new OrbitControls(camera, renderer.domElement);//创建控件对象

})

const addModel = ()=>{
    var loader2 = new OBJLoader();
    loader2.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(28,0,-176)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0x00ff00);// 设置其中一个网格模型的颜色
        scene.add(obj);
    })

    var loader3 = new OBJLoader();
    loader3.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(54,0,-80)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0xff0000);// 设置其中一个网格模型的颜色
        scene.add(obj);
    })

    var loader4 = new OBJLoader();
    loader4.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(5,0,146)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0x0000ff);// 设置其中一个网格模型的颜色
        scene.add(obj);
        // obj.addEventListener('click',()=>{
        //     alert('11')
        // })
    })

}
console.log(scene)
const changeModel = ()=>{
    var loader5 = new OBJLoader();
    loader5.load('/static/model/小音箱.obj',function (obj) {
        obj.position.set(5,0,146)
        obj.scale.set(200,200,200);//网格模型缩放
        obj.children[0].material.color.set(0xffffff);// 设置其中一个网格模型的颜色
        scene.add(obj);

        renderer.domElement.addEventListener('click', function (event) {
            // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
            const px = event.offsetX;
            const py = event.offsetY;
            //屏幕坐标px、py转WebGL标准设备坐标x、y
            //width、height表示canvas画布宽高度
            const x = (px / width) * 2 - 1;
            const y = -(py / height) * 2 + 1;
            //创建一个射线投射器`Raycaster`
            const raycaster = new THREE.Raycaster();
            //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
            // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
            raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
            //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
            // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
            const intersects = raycaster.intersectObjects([obj]);
            // intersects.length大于0说明，说明选中了模型
            if (intersects.length > 0) {
                // 选中模型的第一个模型，设置为红色
                intersects[0].object.material.color.set(0xff0000);
            }
        })
    })
}



</script>

<style lang="scss" scoped>

</style>